<template>
  <el-card class="account-add">
    <!-- 头部 -->
    <div class="header" slot="header">
      <span>添加账号</span>
    </div>
    <!-- 表单 -->
    <!-- status-icon 显示反馈图标 -->
    <el-form status-icon size="mini" :rules="rules" :model="formData" label-width="80px" ref='formRef'>
      <!-- 账号 -->
      <el-form-item label="账号" prop="account">
        <el-input v-model="formData.account"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password"></el-input>
      </el-form-item>
      <!-- 用户组 -->
      <el-form-item label="用户组" prop="userGroup">
        <el-select v-model="formData.userGroup">
          <el-option value="超级管理员">超级管理员</el-option>
          <el-option value="普通管理员">普通管理员</el-option>
        </el-select>
      </el-form-item>
      <!-- 操作 -->
      <el-form-item>
        <el-button @click="submit" type="primary">添加</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
//使用校验函数
import { validateAcc, validatePwd } from '@/utils/utils'

export default {
  //数据
  data() {
    return {
      //表单数据
      formData: {
        account: '',
        password: '',
        userGroup: ''
      },
      //校验规则
      rules: {
        // 需要验证的字段
        // 需要验证的字段
        account: [
          //验证规则对象 required(是否必填) message(提示信息) trigger(触发条件)- blur失去焦点
          { validator: validateAcc, trigger: 'blur', reg: /^[a-zA-Z0-9_-|\u4e00-\u9fa5]{3,12}$/ }
        ],
        password: [
          { validator: validatePwd, trigger: 'blur' }
        ],
        userGroup: [
          { required: true, message: '请选择用户组' },
        ]
      }
    }
  },
  //方法
  methods: {
    //提交方法
    submit() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          //发送请求
          let res = await addUserReq(this.formData);
          //解构数据
          let { code, msg } = res.data;
          //判断
          if (code === 0) {
            //跳转到 列表页面
            this.$router.push('/account/account-list')
          }
        } else {
          console.log('校验不通过', valid)
        }
      })
    },
    //重置方法
    reset() {
      //重置表单
      this.$refs.formRef.resetFields()
    }
  },
}
</script>

<style lang="less" scoped>
.el-form-item {
  width: 262px;
}
</style>